<template>
    <div style="width: 100%; height: 100%;" class="bg-blue">
        <div id="map" class="map" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script setup lang="ts">
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import MultiPolygon from 'ol/geom/MultiPolygon';
import LineString from 'ol/geom/LineString';
import GeoCircle from 'ol/geom/Circle';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';

import GeoJSON from "ol/format/GeoJSON";
import {transform} from "ol/proj";
import Tianditu from "@/lang/tianditu";
import MapStyle from "@/view/gis/map-style";
import fujian from "./fujian.json"
import {onMounted} from "vue";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Stroke from "ol/style/Stroke";
import Circle from "ol/style/Circle";
import {Select} from "ol/interaction";
import {pointerMove} from "ol/events/condition";
import VectorSource from "ol/source/Vector";

/**
 * 更加合理的界面设计
 */
interface Props {

}

const style_polygon = (feature) => new Style({
    fill: new Fill({
        color: 'rgba(33,25,25,0)',
    }),
    stroke: new Stroke({
        color: 'rgb(43 196 243)',
        width: 1,
    }),
});

const style_polygon_hover = (feature) => new Style({
    fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)',
    }),
    stroke: new Stroke({
        color: 'rgb(81,198,234)',
        width: 2,
    }),
});

const style_label = (feature) => new Style({
    text: new Text({
        text: feature.values_.name || '',
        fill: new Fill({
            color: '#FFF',
        }),
        font: '12px 黑体',
        offsetY: -5,
    })
});

onMounted(() => {

    // 定义允许显示的区域范围 [minX, minY, maxX, maxY]
    const restrictedExtent = [
        115.75204322451643, 26.050067429315483,  // 左下角经纬度
        120.61785888671879, 28.498193359375005   // 右上角经纬度
    ];

    let center = [118.09075927734378, 27.38033447265625];

    // 缩放级别
    let zoom = 8;

    // 几何图形
    let layer_vector_polygon = new LayerVector({
        source: new VectorSource({
            features: new GeoJSON({featureProjection: 'EPSG:4490'}).readFeatures(fujian),
        }),
        style: style_polygon
    });

    // 标注
    let layer_vector_label = new LayerVector({
        source: new VectorSource({
            features: new GeoJSON({featureProjection: 'EPSG:4490'}).readFeatures(fujian),
        }),
        style: style_label
    });

    const map = new Map({
        view: new View({
            center: center, // 南平地区
            projection: Tianditu.getProjection(),// 转换后坐标系
            zoom: zoom,
            // extent: restrictedExtent,
            enableRotation: false,
            maxZoom: 18,
            minZoom: 5,
            duration: 2000
        }),
        layers: [layer_vector_label, layer_vector_polygon],
        target: 'map',
    });


    layer_vector_label.setVisible(false);

    // 监听缩放级别变化
    map.getView().on('change:resolution', function () {
        const zoom = map.getView().getZoom();
        // console.log('zoom: ' + zoom);

        // 根据缩放级别控制图层可见性
        layer_vector_label.setVisible(zoom >= 8);
    });

    // 一个点击事件
    map.on('click', function (evt) {
        // 鼠标点击的坐标
        let coordinate = evt.coordinate;
        console.log('click: ' + coordinate);

        map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
            Layers.succeed('功能建设中！');
        });
    });

    // 鼠标悬停，高亮展示
    const selectPointerMove = new Select({
        layers: [layer_vector_polygon], // 需要注意，是针对 sources 生效的，相同 source 还是会受影响
        condition: pointerMove,
        style: style_polygon_hover
    });
    map.addInteraction(selectPointerMove);
})
</script>
